<template>
    <div>
        <el-card class="box-card" style="min-height: 800px">
            <div slot="header" class="clearfix">
                <span>用户信息</span>

                <div style="margin-left: auto">
                    <el-input style="width: 300px"
                            clearable
                            v-model="keyWord"
                            placeholder="输入关键字搜索"/>
                    <el-button style="margin-left: 10px" type="success" plain @click="search(1)">搜索</el-button>

                    <el-button style="margin-left: 10px" type="primary" plain @click="viewAll">全部用户</el-button>
                </div>
            </div>
            <div class="text">
                <el-table
                        :data="tableData.list"
                        style="width: 100%">
                    <el-table-column type="expand">
                        <template slot-scope="props">
                            <el-form label-position="left" inline class="demo-table-expand">
                                <el-form-item label="用户 ID">
                                    <span>{{ props.row.user_id }}</span>
                                </el-form-item>
                                <el-form-item label="用户角色">

                                    <el-popover trigger="hover" placement="top">
                                        <span v-if="props.row.role_name==='super'">这是超级管理员，拥有所有权限</span>
                                        <span v-else-if="props.row.role_name==='admin'">这是管理员，拥有部分权限</span>
                                        <span v-else>这是普通用户，拥有一般权限</span>
                                        <div slot="reference" class="name-wrapper" >
                                            <el-tag style="cursor: pointer"
                                                    :type="props.row.role_name === 'super' ? 'warning': (props.row.role_name === 'admin' ? 'primary' : 'success')">
                                                <span>{{ props.row.role_name }}</span>
                                            </el-tag>
                                        </div>
                                    </el-popover>

                                </el-form-item>
                                <el-form-item label="用户账号">
                                    <span>{{ props.row.username }}</span>
                                </el-form-item>
                                <el-form-item label="电话">
                                    <span v-if="props.row.phone===undefined">暂无</span>
                                    <span v-else>{{ props.row.phone }}</span>
                                </el-form-item>
                                <el-form-item label="密码">
                                    <span>{{ props.row.password }}</span>
                                </el-form-item>
                                <el-form-item label="邮箱">
                                    <span v-if="props.row.email===undefined">暂无</span>
                                    <span v-else>{{ props.row.email }}</span>
                                </el-form-item>
                            </el-form>
                        </template>
                    </el-table-column>
                    <el-table-column
                            width="200"
                            label="用户 ID"
                            prop="user_id">
                    </el-table-column>
                    <el-table-column
                            width="200"
                            label="用户账号"
                            prop="username">
                    </el-table-column>
                    <el-table-column
                            width="200"
                            label="姓名"
                            prop="name">
                    </el-table-column>
                    <el-table-column label="电话" width="200">
                        <template slot-scope="scope">{{ scope.row.phone!==undefined ? scope.row.phone : '暂无' }}</template>
                    </el-table-column>
                    <el-table-column
                            width="200"
                            align="center"
                            label="只读
                            状态(只读)">
                        <template slot-scope="scope">
                            <el-switch
                                    slot="reference"
                                    disabled
                                    v-model="scope.row.state"
                                    :active-value="true"
                                    :inactive-value="false">
                            </el-switch>

                        </template>
                    </el-table-column>

                    <el-table-column
                            label="操作">
                        <template slot-scope="scope">
                            <el-button size="small" type="primary" plain @click="queryUserExam(scope.$index,scope.row.user_id)">查看考试信息</el-button>
                        </template>

                    </el-table-column>
                </el-table>

                <!--分页-->
                <el-pagination class="nav-fenye"
                               @current-change="handleCurrentChange"
                               :current-page="this.tableData.currentPage"
                               :page-size="this.tableData.pageSize"
                               layout="total, prev, pager, next, jumper"
                               :total="this.tableData.total">
                </el-pagination>
            </div>
        </el-card>

    </div>
</template>


<script>
    export default {
        name: "UserList",
        data(){
            return{
                tableData : {},
                keyWord : '',
                form: {
                    id: '',
                    username: '',
                    password: '',
                    email: '',
                    salt: '',
                    avatar: '',
                    role: '',
                    permission: ''
                },
                visible: false,
                dialogVisible: false,
                popoverVisible:false,
            }
        },
        methods : {
            initData(page){//初始化数据
                this.$axios({
                    method : "GET",
                    url:"/admin?method=list&currentPage=" + page,
                }).then((response)=>{
                    console.log(response.data);
                    this.tableData = response.data;
                }).catch(function (error) {
                    console.log(error);
                });
            },
            viewAll(){//查看全部用户
                this.initData(1)
                this.keyWord = ""
            },
            queryUserExam(index, user_id){
                console.log(index, user_id)
            },
            search(page){//关键字搜索
                if (this.keyWord === ""){
                    this.$message.warning({showClose: true, message:'搜索关键字不能为空', offset:80});return
                }
                this.$axios({
                    method : "post",
                    url:"/admin?method=search",
                    data : {
                        keyWord : this.keyWord,
                        currentPage : page
                    },
                }).then((response)=>{
                    if (response.data !== null){
                        console.log(response.data);
                        this.tableData = response.data
                    }else{
                        this.$message.warning({showClose: true, message:'没有找到你要搜索的数据，请尝试更改搜索条件', offset:80});
                    }
                }).catch((error)=> {
                    this.$message.warning({showClose: true, message: error, offset:80});
                });
            },
            handleCurrentChange(currentPage){//处理分页数据
                if (this.keyWord === ""){//如果没有关键字，正常获取数据
                    this.initData(currentPage)
                }else {//获取要搜索的数据
                    this.search(currentPage)
                }
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },
/*            open(index, id, username) {
                const h = this.$createElement;
                this.$msgbox({
                    title: '消息',
                    message: h('p', null, [
                        h('span', null, '是否删除 '),
                        h('i', { style: 'color: teal' }, username)
                    ]),
                    showCancelButton: true,
                    confirmButtonText: '删除',
                    cancelButtonText: '取消',
                    beforeClose: (action, instance, done) => {
                        if (action === 'confirm') {
                            instance.confirmButtonLoading = true;
                            instance.confirmButtonText = '执行中...';
                            this.$axios({
                                method : "GET",
                                url:"/user/del/" + id,
                            }).then((response)=>{
                                if (response.data === true){
                                    console.log("删除成功")
                                    instance.confirmButtonLoading = true;
                                    done();
                                    this.tableData.list.splice(index, 1)
                                }
                            }).catch(function (error) {
                                Qmsg.info("删除失败",{position:'center'});
                            })
                        } else {
                            done();
                        }
                    }
                }).then(action => {
                        this.$message({type: 'success', center: true, message: '删除成功'});
                    },() => {}  //添加这一样代码，添加 取消 时的处理
                );
            }*/
        },
        beforeMount (){//初始化数据
            this.initData(1)
        },
        mounted(){
        },
    }
</script>

<style scoped>
    *{
        outline:none
    }
    .el-card__header{
        background-color: rgba(0,0,0,.03);
    }
    .el-card__body{
        padding-top: 0;
    }
    .clearfix{
        display: flex;
        align-items: center;
    }
    .text {
        font-size: 14px;
    }
    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }
    .clearfix:after {
        clear: both
    }
    .box-card {
        /*
                width: 480px;
        */
    }

    tr{
        height: 60px;
    }
    .demo-table-expand {
        font-size: 0;
    }
    >>> .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }
    .el-form--inline .el-form-item__content{
        vertical-align: baseline;
    }
    .el-switch__label{
        color: #909399;
    }

    /*重写switch的disabled时css*/
    >>>.el-switch.is-disabled{
        opacity: 1;
    }
    >>>.el-switch.is-disabled .el-switch__core, .el-switch.is-disabled .el-switch__label{
        cursor: pointer;
    }

    /*表格详细信息行内对齐*/
    .el-form-item__label{
        vertical-align: baseline;
    }
    .el-form{
        width: auto;
    }


    @media (max-width: 1250px){
        .el-button+.el-button{
            margin-left: 0;
        }
    }

</style>
